<!--
 * @Author: yangfan 1437446666@qq.com
 * @Date: 2023-03-03 18:54:08
 * @LastEditors: yangfan 1437446666@qq.com
 * @LastEditTime: 2023-03-08 17:01:56
 * @FilePath: \s_2006A_shixun\src\components\Drawer\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <a-drawer
    :title="title"
    placement="right"
    :closable="true"
    maskClosable
    :width="width"
    :visible="visible"
    :after-visible-change="afterVisibleChange"
    @close="close"
  >
    <div class="DrawerContext">
      <slot></slot>
    </div>
    <template #footer>
      <a-button style="margin-right: 8px" @click="close">关闭</a-button>
      <a-button @click="handDelete" v-if="toUpdate == '更新'" type="primary">{{
        toUpdate
      }}</a-button>
       <a-button @click="handDelete" v-else-if="toUpdate == '创建'" type="primary">{{
        toUpdate
      }}</a-button>
      <a-button type="primary" danger ghost v-else @click="handDelete">{{ toUpdate }}</a-button>
    </template>
  </a-drawer>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
export default defineComponent({
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '文件信息'
    },
    toUpdate: {
      type: String,
      default: '删除'
    },
    buttonType: {
      type: String,
      default: 'primary'
    },
    width:{
      type:Number,
      default:600
    }
  },
  name: 'DrawerCom',
  setup(props, context) {
    const afterVisibleChange = (bool: boolean) => {
      // console.log('visible', bool)
    }

    // const showDrawer = () => {
    //   visible.value = true;
    // };
    const close = () => {
      context.emit('HandDrawer')
    }
    //删除按钮
    const handDelete = () => {
      context.emit('HandDelete')
    }
    return {
      afterVisibleChange,
      close,
      handDelete
    }
  }
})
</script>

<style lang="scss"></style>
